<template>
    <div class="cimrts-panel">
        <!-- <div class="panel-left">
            <img src="@/assets/cimrts/baseInfo/left_arrow.png" alt="">
        </div> -->
        <div class="panel-center">
            <div class="panel-list" v-for="(item, index) in menuList" :key="index" :title="item.name"
                @click="clickComponent(item)" @mouseenter.stop="enterComponent(item)"
                @mouseleave.stop="leaveComponent(item)"
                :class="{ 'active': item.status === 'active', 'hover': item.status === 'hover', 'none': isDisabled }">
                <img :src="setIcon(item)" alt="">
            </div>
        </div>
        <!-- <div class="panel-right">
            <img src="@/assets/cimrts/baseInfo/right_arrow.png" alt="">
        </div> -->
    </div>
</template>
<script setup lang="ts">
import { watch } from 'vue'

const props = withDefaults(defineProps<{
    isDisabled?: boolean
    menuList: any,
}>(), {
    menuList: [],
    isDisabled: false,
});
const emits = defineEmits(["clickComponent"]);

// 设置图片
const setIcon = (item: any) => {
    switch (item.status) {
        case "none":
            return item.icon;
        case "active":
            return item.activeIcon;
        case "hover":
            return item.hoverIcon;
        default: return undefined

    }
}

// 鼠标移入组件
const enterComponent = (item: any) => {
    if (item.status == "active") return;
    item.status = "hover"
}

// 鼠标移出组件
const leaveComponent = (item: any) => {
    if (item.status == "active") return;
    item.status = "none"

}

// 鼠标点击组件
const clickComponent = (item: any) => {
    if(props.isDisabled) return
    if (item.isOnly) props.menuList.map((e: any) => (e.id !=item.id) && e.isOnly && (e.status = "none"))
    emits('clickComponent', item)
}

</script>

<style scoped>
.cimrts-panel {
    height: 40px;
    width: 100%;
    background-color: #f0f0f0;
    display: flex;
    user-select: none;
}

.panel-right,
.panel-left,
.panel-list {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.panel-center {
    margin: 0 10px;
    /* width: calc(100% - 80px); */
    height: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.panel-list {
    border-radius: 3px;
    cursor: pointer;

}

.panel-list>img {
    width: 20px;
    height: 20px;
}

.active {
    background-color: #537cfe;
}

.hover {
    background-color: #cfd8f3;
}

.none {
    /* pointer-events: none; */
}
</style>